<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店客房清扫APP</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
            color: #374151;
            line-height: 1.5;
        }
        .screen {
            width: 360px;
            height: 640px;
            overflow: hidden;
            position: relative;
            border: 10px solid #222;
            border-radius: 36px;
            margin: 20px;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
        }
        .status-bar {
            height: 24px;
            display: flex;
            justify-content: space-between;
            padding: 0 16px;
            align-items: center;
            font-size: 14px;
            background-color: #ffffff;
        }
        .nav-bar {
            height: 56px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            background-color: white;
        }
        .tab-bar {
            height: 84px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: white;
            border-top: 1px solid #f3f4f6;
            position: absolute;
            bottom: 0;
            width: 100%;
            padding-bottom: 24px;
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            padding: 8px 0;
        }
        .content {
            height: calc(100% - 184px);
            overflow-y: auto;
            background-color: #f9fafb;
        }
        
        /* 自定义滚动条 */
        .content::-webkit-scrollbar {
            width: 4px;
        }
        .content::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        .content::-webkit-scrollbar-thumb {
            background: #d1d5db;
            border-radius: 2px;
        }
        
        /* 动画效果 */
        .animate-fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* 自定义开关样式 */
        .toggle-checkbox:checked {
            right: 0;
            background-color: #0ea5e9;
            border-color: #0ea5e9;
        }
        .toggle-checkbox:checked + .toggle-label {
            background-color: #e0f2fe;
        }
        
        /* 隐藏水平滚动条 */
        .scrollbar-hide {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;  /* Chrome, Safari and Opera */
        }
        
        /* 卡片悬停效果 */
        .hover-card {
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .hover-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        /* 按钮点击效果 */
        .active-scale {
            transition: transform 0.1s;
        }
        .active-scale:active {
            transform: scale(0.98);
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="max-w-6xl mx-auto">
        <h1 class="text-3xl font-bold text-center my-8 text-gray-800">酒店客房清扫APP</h1>
        
        <div class="flex flex-wrap justify-center">
            <!-- 登录页面 -->
            <div class="screen bg-primary-50">
                <div class="status-bar">
                    <span>9:41</span>
                    <div class="flex space-x-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                        </svg>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
                        </svg>
                    </div>
                </div>
                <div class="h-full flex flex-col items-center justify-center p-8 animate-fade-in">
                    <div class="w-24 h-24 bg-gradient-to-br from-primary-400 to-primary-600 rounded-full flex items-center justify-center mb-10 shadow-lg">
                        <svg class="w-14 h-14 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                    </div>
                    <h1 class="text-3xl font-bold text-gray-800 mb-10">客房清扫管理</h1>
                    <div class="w-full space-y-5">
                        <div class="bg-white rounded-xl p-4 shadow-sm">
                            <input type="text" placeholder="员工ID" class="w-full p-3 focus:outline-none text-gray-700">
                        </div>
                        <div class="bg-white rounded-xl p-4 shadow-sm">
                            <input type="password" placeholder="密码" class="w-full p-3 focus:outline-none text-gray-700">
                        </div>
                        <button class="w-full bg-gradient-to-r from-primary-500 to-primary-600 text-white py-4 rounded-xl font-medium shadow-lg transform transition hover:scale-[1.02] active:scale-[0.98]">
                            登录
                        </button>
                        <div class="flex justify-between text-sm text-primary-600 px-2">
                            <span>忘记密码?</span>
                            <span>联系管理员</span>
                        </div>
                    </div>
                </div>
            </div>


            // ... 登录页面代码保持不变 ...

<!-- 选择酒店页面 -->
<div class="screen bg-white">
    <div class="status-bar">
        <span>9:41</span>
        <div class="flex space-x-2">
            <!-- 状态栏图标保持不变 -->
        </div>
    </div>
    <div class="nav-bar border-b border-gray-100">
        <div class="text-xl font-semibold text-gray-800">选择酒店</div>
    </div>
    <div class="content">
        <div class="p-4">
            <div class="mb-4">
                <div class="text-sm font-medium text-gray-500 mb-2">请选择您所在的酒店</div>
                <div class="space-y-3">
                    <div class="bg-white rounded-xl shadow-sm p-4 hover-card active-scale">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-3">
                                <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                </svg>
                            </div>
                            <div>
                                <div class="font-medium text-gray-800">北京王府井酒店</div>
                                <div class="text-sm text-gray-500">北京市东城区王府井大街88号</div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl shadow-sm p-4 hover-card active-scale">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-3">
                                <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                </svg>
                            </div>
                            <div>
                                <div class="font-medium text-gray-800">上海外滩酒店</div>
                                <div class="text-sm text-gray-500">上海市黄浦区中山东一路88号</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-bar">
        <!-- 底部导航栏保持不变 -->
    </div>
</div>

<!-- 选择功能页面 -->
<div class="screen bg-white">
    <div class="status-bar">
        <span>9:41</span>
        <div class="flex space-x-2">
            <!-- 状态栏图标保持不变 -->
        </div>
    </div>
    <div class="nav-bar border-b border-gray-100">
        <div class="text-xl font-semibold text-gray-800">选择功能</div>
    </div>
    <div class="content">
        <div class="p-4">
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-white rounded-xl shadow-sm p-6 flex flex-col items-center justify-center hover-card active-scale">
                    <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-3">
                        <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                        </svg>
                    </div>
                    <div class="text-center">
                        <div class="font-medium text-gray-800">客房清扫</div>
                        <div class="text-sm text-gray-500">开始清扫任务</div>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-sm p-6 flex flex-col items-center justify-center hover-card active-scale">
                    <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-3">
                        <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div class="text-center">
                        <div class="font-medium text-gray-800">质检检查</div>
                        <div class="text-sm text-gray-500">房间质量检查</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-bar">
        <!-- 底部导航栏保持不变 -->
    </div>
</div>

<!-- 清扫检查页面 -->
<div class="screen bg-white">
    <div class="status-bar">
        <span>9:41</span>
        <div class="flex space-x-2">
            <!-- 状态栏图标保持不变 -->
        </div>
    </div>
    <div class="nav-bar border-b border-gray-100">
        <div class="text-xl font-semibold text-gray-800">房间检查</div>
    </div>
    <div class="content">
        <div class="p-4">
            <div class="mb-6">
                <div class="flex items-center justify-between mb-4">
                    <div class="text-lg font-semibold text-gray-800">房间 8201</div>
                    <div class="bg-primary-100 text-primary-600 px-3 py-1 rounded-full text-sm">进行中</div>
                </div>
                <div class="text-sm text-gray-500">豪华大床房 | 2人入住</div>
                
                <!-- 新增清扫员信息 -->
                <div class="mt-2 flex items-center">
                    <div class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center mr-2">
                        <svg class="w-4 h-4 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                    </div>
                    <div class="text-sm">
                        <span class="text-gray-600">清扫员：</span>
                        <span class="text-primary-600 font-medium">张三</span>
                        <span class="text-gray-500 text-xs ml-2">今日任务: 3/8</span>
                    </div>
                </div>
                
                <!-- 新增清扫时间信息 -->
                <div class="mt-2 flex items-center text-sm text-gray-600">
                    <svg class="w-4 h-4 mr-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span>开始时间: 09:30</span>
                    <span class="mx-2">|</span>
                    <span>预计完成: 11:00</span>
                </div>
            </div>

            <div class="space-y-4">
                <!-- 检查项 -->
                <div class="bg-white rounded-xl shadow-sm p-4">
                    <div class="flex items-center justify-between">
                        <div class="text-gray-800">床铺整理</div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-500"></div>
                        </label>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-4">
                    <div class="flex items-center justify-between">
                        <div class="text-gray-800">卫生间清洁</div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-500"></div>
                        </label>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-4">
                    <div class="flex items-center justify-between">
                        <div class="text-gray-800">地面清洁</div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-500"></div>
                        </label>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-4">
                    <div class="flex items-center justify-between">
                        <div class="text-gray-800">物品补充</div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-500"></div>
                        </label>
                    </div>
                </div>
                
                <!-- 新增问题反馈区域 -->
                <div class="bg-white rounded-xl shadow-sm p-4">
                    <div class="mb-2 text-gray-800">问题反馈</div>
                    <textarea placeholder="请输入发现的问题或特殊情况..." class="w-full p-3 bg-gray-50 rounded-lg border border-gray-200 focus:outline-none focus:ring-1 focus:ring-primary-500 text-sm"></textarea>
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class=" bottom-24 left-0 right-0 px-4 max-w-[360px] mx-auto">
                <button class="w-full bg-gradient-to-r from-primary-500 to-primary-600 text-white py-4 rounded-xl font-medium shadow-lg transform transition hover:scale-[1.02] active:scale-[0.98]">
                    提交检查
                </button>
            </div>
        </div>
    </div>
    <div class="tab-bar">
        <!-- 底部导航栏保持不变 -->
    </div>
</div>



<!-- 客房派工页面 -->
<div class="screen bg-gray-50">
    <div class="status-bar">
        <span>9:41</span>
        <div class="flex space-x-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
            </svg>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
            </svg>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
            </svg>
        </div>
    </div>
    
    <!-- 顶部导航栏 -->
    <div class="nav-bar border-b border-gray-100 bg-white sticky top-0 z-10">
        <div class="text-xl font-semibold text-gray-800">客房派工</div>
        <div class="flex items-center space-x-3">
            <button id="filterBtn" class="p-2 rounded-full bg-gray-100">
                <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
                </svg>
            </button>
            <button id="batchAssignBtn" class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm font-medium hidden">
                批量派工 (<span id="selectedCount">0</span>)
            </button>
        </div>
    </div>
    
    <!-- 筛选条件 -->
    <div class="bg-white px-4 py-3 border-b border-gray-100">
        <div class="flex space-x-2 overflow-x-auto py-1 scrollbar-hide">
            <div class="px-4 py-2 bg-primary-600 text-white rounded-full text-sm font-medium whitespace-nowrap">
                全部房型
            </div>
            <div class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm font-medium whitespace-nowrap">
                标准房
            </div>
            <div class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm font-medium whitespace-nowrap">
                豪华房
            </div>
            <div class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm font-medium whitespace-nowrap">
                套房
            </div>
        </div>
    </div>
    
    <!-- 搜索框 -->
    <div class="p-4 bg-white border-b border-gray-100">
        <div class="relative">
            <input type="text" placeholder="搜索房间号或房型" class="w-full pl-10 pr-4 py-2 bg-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
            <svg class="w-5 h-5 text-gray-500 absolute left-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
        </div>
    </div>

    
    
    <div class="content pb-20">
        <!-- 房间列表 -->
        <div class="p-4 space-y-3">
            <!-- 楼层分组 -->
            <div class="mb-4">
                <div class="flex items-center justify-between mb-2">
                    <div class="text-sm font-medium text-gray-500">8楼 (3间待派工)</div>
                    <div class="text-xs text-primary-600 font-medium floor-select-all">全选</div>
                </div>



                
            
            <!-- 单个房间卡片 -->
            <div class="bg-white rounded-xl shadow-sm p-4 mb-3 hover-card active-scale">
                <div class="flex justify-between items-start">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="font-medium text-gray-800 mr-2">房间 8201</span>
                            <span class="bg-red-100 text-red-600 text-xs px-2.5 py-0.5 rounded-full">高优先级</span>
                        </div>
                        <div class="text-sm text-gray-600 mb-2">豪华大床房 | 2人入住</div>
                        
                        <!-- 新增：已派工信息显示 -->
                        <div class="flex items-center space-x-4 mb-2">
                            <div class="flex items-center">
                                <svg class="w-4 h-4 text-gray-500 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                </svg>
                                <span class="text-sm text-gray-600">张丽</span>
                            </div>
                            <div class="flex items-center">
                                <svg class="w-4 h-4 text-gray-500 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <span class="text-sm text-gray-600">09:30开始</span>
                            </div>
                            <div class="bg-yellow-50 text-yellow-700 text-xs px-2 py-0.5 rounded-full">
                                清扫中
                            </div>
                        </div>
                        
                        <!-- 新增：进度条 -->
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mb-1">
                            <div class="bg-blue-600 h-1.5 rounded-full" style="width: 45%"></div>
                        </div>
                        <div class="text-xs text-gray-500">预计完成时间：10:30</div>
                    </div>
                    
                    <!-- 右侧操作按钮 -->
                    <div class="ml-4">
                        <button class="p-2 hover:bg-gray-100 rounded-full">
                            <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 另一个房间卡片示例 -->
            <div class="bg-white rounded-xl shadow-sm p-4 mb-3 hover-card active-scale">
                <div class="flex justify-between items-start">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="font-medium text-gray-800 mr-2">房间 8202</span>
                            <span class="bg-orange-100 text-orange-600 text-xs px-2.5 py-0.5 rounded-full">中优先级</span>
                        </div>
                        <div class="text-sm text-gray-600 mb-2">标准双床房 | 3人入住</div>
                        
                        <!-- 新增：已派工信息显示 -->
                        <div class="flex items-center space-x-4 mb-2">
                            <div class="flex items-center">
                                <svg class="w-4 h-4 text-gray-500 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                </svg>
                                <span class="text-sm text-gray-600">王强</span>
                            </div>
                            <div class="flex items-center">
                                <svg class="w-4 h-4 text-gray-500 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <span class="text-sm text-gray-600">10:00开始</span>
                            </div>
                            <div class="bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-full">
                                待开始
                            </div>
                        </div>
                    </div>
                    
                    <!-- 右侧操作按钮 -->
                    <div class="ml-4">
                        <button class="p-2 hover:bg-gray-100 rounded-full">
                            <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
                
                <!-- 房间卡片 -->
                <div class="bg-white rounded-xl shadow-sm p-4 mb-3 hover-card active-scale">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <input type="checkbox" class="room-checkbox w-5 h-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500" data-floor="8">
                            <div>
                                <div class="flex items-center">
                                    <div class="font-medium text-gray-800 mr-2">房间 8201</div>
                                    <span class="bg-red-100 text-red-600 text-xs px-2 py-0.5 rounded-full">VIP</span>
                                </div>
                                <div class="text-sm text-gray-500">豪华大床房 | 2人入住</div>
                                <div class="flex items-center text-xs text-gray-500 mt-1">
                                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span>预计完成: 11:00</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-col items-end">
                            <div class="bg-yellow-50 text-yellow-700 px-2 py-1 rounded-lg text-xs font-medium mb-2">
                                待派工
                            </div>
                            <button class="single-assign-btn px-3 py-1.5 bg-primary-50 text-primary-600 rounded-lg text-sm font-medium">
                                派工
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm p-4 mb-3 hover-card active-scale">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <input type="checkbox" class="room-checkbox w-5 h-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500" data-floor="8">
                            <div>
                                <div class="font-medium text-gray-800">房间 8202</div>
                                <div class="text-sm text-gray-500">标准双床房 | 2人入住</div>
                                <div class="flex items-center text-xs text-gray-500 mt-1">
                                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span>预计完成: 11:30</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-col items-end">
                            <div class="bg-yellow-50 text-yellow-700 px-2 py-1 rounded-lg text-xs font-medium mb-2">
                                待派工
                            </div>
                            <button class="single-assign-btn px-3 py-1.5 bg-primary-50 text-primary-600 rounded-lg text-sm font-medium">
                                派工
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm p-4 mb-3 hover-card active-scale">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <input type="checkbox" class="room-checkbox w-5 h-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500" data-floor="8">
                            <div>
                                <div class="font-medium text-gray-800">房间 8205</div>
                                <div class="text-sm text-gray-500">豪华套房 | 3人入住</div>
                                <div class="flex items-center text-xs text-gray-500 mt-1">
                                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span>预计完成: 12:00</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-col items-end">
                            <div class="bg-yellow-50 text-yellow-700 px-2 py-1 rounded-lg text-xs font-medium mb-2">
                                待派工
                            </div>
                            <button class="single-assign-btn px-3 py-1.5 bg-primary-50 text-primary-600 rounded-lg text-sm font-medium">
                                派工
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 7楼分组 -->
            <div class="mb-4">
                <div class="flex items-center justify-between mb-2">
                    <div class="text-sm font-medium text-gray-500">7楼 (2间待派工)</div>
                    <div class="text-xs text-primary-600 font-medium floor-select-all">全选</div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm p-4 mb-3 hover-card active-scale">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <input type="checkbox" class="room-checkbox w-5 h-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500" data-floor="7">
                            <div>
                                <div class="font-medium text-gray-800">房间 7105</div>
                                <div class="text-sm text-gray-500">标准双床房 | 3人入住</div>
                                <div class="flex items-center text-xs text-gray-500 mt-1">
                                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span>预计完成: 13:00</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-col items-end">
                            <div class="bg-yellow-50 text-yellow-700 px-2 py-1 rounded-lg text-xs font-medium mb-2">
                                待派工
                            </div>
                            <button class="single-assign-btn px-3 py-1.5 bg-primary-50 text-primary-600 rounded-lg text-sm font-medium">
                                派工
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm p-4 mb-3 hover-card active-scale">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <input type="checkbox" class="room-checkbox w-5 h-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500" data-floor="7">
                            <div>
                                <div class="font-medium text-gray-800">房间 7108</div>
                                <div class="text-sm text-gray-500">标准大床房 | 2人入住</div>
                                <div class="flex items-center text-xs text-gray-500 mt-1">
                                    <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span>预计完成: 13:30</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-col items-end">
                            <div class="bg-yellow-50 text-yellow-700 px-2 py-1 rounded-lg text-xs font-medium mb-2">
                                待派工
                            </div>
                            <button class="single-assign-btn px-3 py-1.5 bg-primary-50 text-primary-600 rounded-lg text-sm font-medium">
                                派工
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <div class="tab-item text-gray-400">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
            </svg>
            <span>首页</span>
        </div>
        <div class="tab-item text-primary-600">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
                <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path>
            </svg>
            <span>任务</span>
        </div>
        <div class="tab-item text-gray-400">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
            </svg>
            <span>消息</span>
        </div>
        <div class="tab-item text-gray-400">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
            </svg>
            <span>我的</span>
        </div>
    </div>
</div>

<!-- 批量派工弹窗 -->
<div id="batchAssignModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="absolute bottom-0 w-full bg-white rounded-t-2xl p-6">
        <div class="flex justify-between items-center mb-6">
            <div class="text-xl font-semibold">批量派工</div>
            <button id="closeBatchModal" class="text-gray-400 hover:text-gray-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <!-- 清扫员选择 -->
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-2">选择清扫员</label>
            <div class="relative">
                <select id="cleanerSelect" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 appearance-none bg-white">
                    <option value="" disabled selected>请选择清扫员</option>
                    <option value="1">张三 (今日任务: 3/8)</option>
                    <option value="2">李四 (今日任务: 2/6)</option>
                    <option value="3">王五 (今日任务: 4/8)</option>
                    <option value="4">赵六 (今日任务: 1/6)</option>
                </select>
                <svg class="w-5 h-5 text-gray-400 absolute right-3 top-3.5 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
            </div>
        </div>

        <!-- 已选房间列表 -->
        <div class="mb-6">
            <div class="flex justify-between items-center mb-2">
                <div class="text-sm font-medium text-gray-700">已选房间 (<span id="selectedRoomsCount">0</span>)</div>
                <button id="clearAllSelected" class="text-xs text-primary-600 font-medium">清空</button>
            </div>
            <div id="selectedRoomsList" class="space-y-2 max-h-48 overflow-y-auto">
                <!-- 已选房间项将通过JS动态添加 -->
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex space-x-3">
            <button id="cancelBatchSelect" class="flex-1 px-4 py-3 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 font-medium">
                取消
            </button>
            <button id="confirmBatchAssign" class="flex-1 px-4 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 font-medium">
                确认派工
            </button>
        </div>
    </div>
</div>

<!-- 单个派工弹窗 -->
<div id="singleAssignModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="absolute bottom-0 w-full bg-white rounded-t-2xl p-6">
        <div class="flex justify-between items-center mb-6">
            <div class="text-xl font-semibold">派工</div>
            <button id="closeSingleModal" class="text-gray-400 hover:text-gray-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <!-- 房间信息 -->
        <div class="mb-6 bg-gray-50 p-4 rounded-lg">
            <div id="singleRoomInfo" class="font-medium text-gray-800 mb-1">房间 8201</div>
            <div id="singleRoomType" class="text-sm text-gray-500">豪华大床房 | 2人入住</div>
        </div>

        <!-- 清扫员选择 -->
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-2">选择清扫员</label>
            <div class="relative">
                <select id="singleCleanerSelect" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 appearance-none bg-white">
                    <option value="" disabled selected>请选择清扫员</option>
                    <option value="1">张三 (今日任务: 3/8)</option>
                    <option value="2">李四 (今日任务: 2/6)</option>
                    <option value="3">王五 (今日任务: 4/8)</option>
                    <option value="4">赵六 (今日任务: 1/6)</option>
                </select>
                <svg class="w-5 h-5 text-gray-400 absolute right-3 top-3.5 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
            </div>
        </div>

        <!-- 预计完成时间 -->
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-2">预计完成时间</label>
            <div class="relative">
                <input type="time" id="expectedTime" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 bg-white" value="11:30">
                <svg class="w-5 h-5 text-gray-400 absolute right-3 top-3.5 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex space-x-3">
            <button id="cancelSingleAssign" class="flex-1 px-4 py-3 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 font-medium">
                取消派工
            </button>
            <button id="confirmSingleAssign" class="flex-1 px-4 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 font-medium">
                确认派工
            </button>
        </div>
    </div>
</div>

<script>
    // 批量选择功能
    const checkboxes = document.querySelectorAll('.room-checkbox');
    const batchAssignBtn = document.getElementById('batchAssignBtn');
    const singleAssignBtns = document.querySelectorAll('.single-assign-btn');
    const batchAssignModal = document.getElementById('batchAssignModal');
    const singleAssignModal = document.getElementById('singleAssignModal');
    const selectedRoomsList = document.getElementById('selectedRoomsList');
    const selectedRoomsCount = document.getElementById('selectedRoomsCount');
    const cleanerSelect = document.getElementById('cleanerSelect');
    const singleCleanerSelect = document.getElementById('singleCleanerSelect');
    
    // 更新选中房间数量
    function updateSelectedCount() {
        const checkedCount = document.querySelectorAll('.room-checkbox:checked').length;
        document.getElementById('selectedCount').textContent = checkedCount;
        selectedRoomsCount.textContent = checkedCount;
        batchAssignBtn.classList.toggle('hidden', checkedCount === 0);
    }

    // 初始化复选框事件
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', () => {
            updateSelectedCount();
            
            // 单个派工按钮隐藏/显示逻辑
            const parentDiv = checkbox.closest('div');
            const singleAssignBtn = parentDiv.querySelector('.single-assign-btn');
            singleAssignBtn.classList.toggle('hidden', checkbox.checked);
        });
    });

    // 楼层全选功能
    document.querySelectorAll('.floor-select-all').forEach(btn => {
        btn.addEventListener('click', (e) => {
            const floorSection = e.target.closest('div').parentElement;
            const floorCheckboxes = floorSection.querySelectorAll('.room-checkbox');
            const isAllChecked = Array.from(floorCheckboxes).every(cb => cb.checked);
            
            floorCheckboxes.forEach(cb => {
                cb.checked = !isAllChecked;
                const parentDiv = cb.closest('div');
                const singleAssignBtn = parentDiv.querySelector('.single-assign-btn');
                singleAssignBtn.classList.toggle('hidden', !isAllChecked);
            });
            
            updateSelectedCount();
        });
    });

    // 批量派工功能
        // 批量派工功能
        batchAssignBtn.addEventListener('click', () => {
        selectedRoomsList.innerHTML = '';
        checkboxes.forEach(checkbox => {
            if (checkbox.checked) {
                const roomInfo = checkbox.closest('div').querySelector('.font-medium').textContent;
                const roomType = checkbox.closest('div').querySelector('.text-sm').textContent;
                
                const roomItem = document.createElement('div');
                roomItem.className = 'flex justify-between items-center p-2 bg-gray-50 rounded-lg';
                roomItem.innerHTML = `
                    <div class="text-sm text-gray-700">${roomInfo} - ${roomType}</div>
                    <button class="remove-room text-gray-400 hover:text-gray-600">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                `;
                
                selectedRoomsList.appendChild(roomItem);
                
                // 添加移除房间事件
                roomItem.querySelector('.remove-room').addEventListener('click', () => {
                    roomItem.remove();
                    // 找到对应的复选框并取消选中
                    checkboxes.forEach(cb => {
                        if (cb.closest('div').querySelector('.font-medium').textContent === roomInfo) {
                            cb.checked = false;
                            const singleAssignBtn = cb.closest('div').querySelector('.single-assign-btn');
                            singleAssignBtn.classList.remove('hidden');
                        }
                    });
                    updateSelectedCount();
                });
            }
        });
        
        batchAssignModal.classList.remove('hidden');
    });
    
    // 关闭批量派工弹窗
    document.getElementById('closeBatchModal').addEventListener('click', () => {
        batchAssignModal.classList.add('hidden');
    });
    
    // 取消批量派工
    document.getElementById('cancelBatchSelect').addEventListener('click', () => {
        batchAssignModal.classList.add('hidden');
    });
    
    // 清空所有选中
    document.getElementById('clearAllSelected').addEventListener('click', () => {
        checkboxes.forEach(checkbox => {
            if (checkbox.checked) {
                checkbox.checked = false;
                const singleAssignBtn = checkbox.closest('div').querySelector('.single-assign-btn');
                singleAssignBtn.classList.remove('hidden');
            }
        });
        selectedRoomsList.innerHTML = '';
        updateSelectedCount();
    });
    
    // 确认批量派工
    document.getElementById('confirmBatchAssign').addEventListener('click', () => {
        const selectedCleaner = cleanerSelect.value;
        if (!selectedCleaner) {
            alert('请选择清扫员');
            return;
        }
        
        // 这里可以添加派工逻辑，例如发送请求到服务器
        alert('派工成功！');
        
        // 重置选中状态
        checkboxes.forEach(checkbox => {
            if (checkbox.checked) {
                checkbox.checked = false;
                const singleAssignBtn = checkbox.closest('div').querySelector('.single-assign-btn');
                singleAssignBtn.classList.remove('hidden');
                
                // 更新房间状态显示
                const statusDiv = checkbox.closest('.flex').nextElementSibling.querySelector('div:first-child');
                statusDiv.className = 'bg-blue-50 text-blue-700 px-2 py-1 rounded-lg text-xs font-medium mb-2';
                statusDiv.textContent = '已派工';
                
                // 隐藏派工按钮
                const assignBtn = checkbox.closest('.flex').nextElementSibling.querySelector('button');
                assignBtn.classList.add('hidden');
            }
        });
        
        batchAssignModal.classList.add('hidden');
        updateSelectedCount();
    });
    
    // 单个派工功能
    singleAssignBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            const roomCard = e.target.closest('.bg-white');
            const roomInfo = roomCard.querySelector('.font-medium').textContent;
            const roomType = roomCard.querySelector('.text-sm').textContent;
            
            // 更新弹窗信息
            document.getElementById('singleRoomInfo').textContent = roomInfo;
            document.getElementById('singleRoomType').textContent = roomType;
            
            singleAssignModal.classList.remove('hidden');
        });
    });
    
    // 关闭单个派工弹窗
    document.getElementById('closeSingleModal').addEventListener('click', () => {
        singleAssignModal.classList.add('hidden');
    });
    
    // 取消单个派工
    document.getElementById('cancelSingleAssign').addEventListener('click', () => {
        singleAssignModal.classList.add('hidden');
    });
    
    // 确认单个派工
    document.getElementById('confirmSingleAssign').addEventListener('click', () => {
        const selectedCleaner = singleCleanerSelect.value;
        const expectedTime = document.getElementById('expectedTime').value;
        
        if (!selectedCleaner) {
            alert('请选择清扫员');
            return;
        }
        
        if (!expectedTime) {
            alert('请设置预计完成时间');
            return;
        }
        
        // 这里可以添加派工逻辑，例如发送请求到服务器
        alert('派工成功！');
        
        // 获取当前操作的房间信息
        const roomInfo = document.getElementById('singleRoomInfo').textContent;
        
        // 更新房间状态显示
        document.querySelectorAll('.bg-white').forEach(card => {
            const cardRoomInfo = card.querySelector('.font-medium').textContent;
            if (cardRoomInfo === roomInfo) {
                const statusDiv = card.querySelector('.bg-yellow-50');
                statusDiv.className = 'bg-blue-50 text-blue-700 px-2 py-1 rounded-lg text-xs font-medium mb-2';
                statusDiv.textContent = '已派工';
                
                // 隐藏派工按钮
                const assignBtn = card.querySelector('.single-assign-btn');
                assignBtn.classList.add('hidden');
            }
        });
        
        singleAssignModal.classList.add('hidden');
    });
    
    // 初始化
    updateSelectedCount();
</script>

<style>
    /* 全局样式 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }
    
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        line-height: 1.5;
        color: #333;
        background-color: #f5f5f5;
    }
    
    /* 颜色变量 */
    :root {
        --primary-50: #eff6ff;
        --primary-100: #dbeafe;
        --primary-200: #bfdbfe;
        --primary-300: #93c5fd;
        --primary-400: #60a5fa;
        --primary-500: #3b82f6;
        --primary-600: #2563eb;
        --primary-700: #1d4ed8;
        --primary-800: #1e40af;
        --primary-900: #1e3a8a;
    }
    
    /* 工具类 */
    .bg-primary-50 { background-color: var(--primary-50); }
    .bg-primary-100 { background-color: var(--primary-100); }
    .bg-primary-200 { background-color: var(--primary-200); }
    .bg-primary-300 { background-color: var(--primary-300); }
    .bg-primary-400 { background-color: var(--primary-400); }
    .bg-primary-500 { background-color: var(--primary-500); }
    .bg-primary-600 { background-color: var(--primary-600); }
    .bg-primary-700 { background-color: var(--primary-700); }
    
    .text-primary-50 { color: var(--primary-50); }
    .text-primary-100 { color: var(--primary-100); }
    .text-primary-200 { color: var(--primary-200); }
    .text-primary-300 { color: var(--primary-300); }
    .text-primary-400 { color: var(--primary-400); }
    .text-primary-500 { color: var(--primary-500); }
    .text-primary-600 { color: var(--primary-600); }
    .text-primary-700 { color: var(--primary-700); }
    
    /* 屏幕容器 */
    .screen {
        position: relative;
        width: 100%;
        max-width: 480px;
        min-height: 100vh;
        margin: 0 auto;
        overflow: hidden;
    }
    
    /* 状态栏 */
    .status-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        background-color: white;
        font-size: 0.875rem;
        font-weight: 500;
    }
    
    /* 导航栏 */
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background-color: white;
    }
    
    /* 内容区域 */
    .content {
        padding-bottom: 4rem;
    }
    
    /* 底部标签栏 */
    .tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 480px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0.5rem 0;
        background-color: white;
        border-top: 1px solid #f0f0f0;
        z-index: 10;
    }
    
    .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.75rem;
        padding: 0.5rem;
    }
    
    /* 交互效果 */
    .hover-card {
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .hover-card:active {
        transform: scale(0.98);
    }
    
    .active-scale:active {
        transform: scale(0.98);
    }
    
    /* 隐藏滚动条 */
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
</style>



            <!-- 任务列表页面 -->
            <div class="screen bg-white">
                <div class="status-bar">
                    <span>9:41</span>
                    <div class="flex space-x-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                        </svg>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
                        </svg>
                    </div>
                </div>
                <div class="nav-bar border-b border-gray-100">
                    <div class="text-xl font-semibold text-gray-800">今日任务</div>
                    <div class="flex items-center space-x-3">
                        <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
                        </svg>
                    </div>
                </div>
                <div class="content">
                    <div class="p-4">
                        <div class="flex space-x-2 mb-4 overflow-x-auto py-1 scrollbar-hide">
                            <div class="px-4 py-2 bg-primary-600 text-white rounded-full text-sm font-medium whitespace-nowrap">
                                全部任务 (12)
                            </div>
                            <div class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm font-medium whitespace-nowrap">
                                待清扫 (8)
                            </div>
                            <div class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm font-medium whitespace-nowrap">
                                已完成 (4)
                            </div>
                            <div class="px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm font-medium whitespace-nowrap">
                                待检查 (0)
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="flex justify-between items-center mb-2">
                                <div class="text-sm font-medium text-gray-500">优先任务</div>
                                <div class="text-xs text-primary-600">查看全部</div>
                            </div>
                            
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-3 border-l-4 border-red-500 hover-card active-scale">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <div class="flex items-center mb-1">
                                            <span class="font-medium text-gray-800 mr-2">房间 8201</span>
                                            <span class="bg-red-100 text-red-600 text-xs px-2 py-0.5 rounded-full">高优先级</span>
                                        </div>
                                        <div class="text-sm text-gray-600 mb-2">豪华大床房 | 2人入住</div>
                                        <div class="flex items-center text-xs text-gray-500">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                            <span>预计完成时间: 11:00</span>
                                        </div>
                                    </div>
                                    <div class="bg-yellow-50 text-yellow-700 px-3 py-1 rounded-lg text-sm font-medium">
                                        待清扫
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-3 border-l-4 border-orange-500 hover-card active-scale">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <div class="flex items-center mb-1">
                                            <span class="font-medium text-gray-800 mr-2">房间 7105</span>
                                            <span class="bg-orange-100 text-orange-600 text-xs px-2 py-0.5 rounded-full">中优先级</span>
                                        </div>
                                        <div class="text-sm text-gray-600 mb-2">标准双床房 | 3人入住</div>
                                        <div class="flex items-center text-xs text-gray-500">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                            <span>预计完成时间: 11:30</span>
                                        </div>
                                    </div>
                                    <div class="bg-yellow-50 text-yellow-700 px-3 py-1 rounded-lg text-sm font-medium">
                                        待清扫
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="flex justify-between items-center mb-2">
                                <div class="text-sm font-medium text-gray-500">常规任务</div>
                                <div class="text-xs text-primary-600">查看全部</div>
                            </div>
                            
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-3 hover-card active-scale">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <div class="flex items-center mb-1">
                                            <span class="font-medium text-gray-800 mr-2">房间 6023</span>
                                        </div>
                                        <div class="text-sm text-gray-600 mb-2">商务套房 | 1人入住</div>
                                        <div class="flex items-center text-xs text-gray-500">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                            <span>预计完成时间: 13:00</span>
                                        </div>
                                    </div>
                                    <div class="bg-yellow-50 text-yellow-700 px-3 py-1 rounded-lg text-sm font-medium">
                                        待清扫
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-3 hover-card active-scale">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <div class="flex items-center mb-1">
                                            <span class="font-medium text-gray-800 mr-2">房间 5012</span>
                                        </div>
                                        <div class="text-sm text-gray-600 mb-2">标准大床房 | 2人入住</div>
                                        <div class="flex items-center text-xs text-gray-500">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                            <span>预计完成时间: 14:00</span>
                                        </div>
                                    </div>
                                    <div class="bg-yellow-50 text-yellow-700 px-3 py-1 rounded-lg text-sm font-medium">
                                        待清扫
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-3 hover-card active-scale">
                                <div class="flex justify-between items-start">
                                    <div>
                                        <div class="flex items-center mb-1">
                                            <span class="font-medium text-gray-800 mr-2">房间 9018</span>
                                        </div>
                                        <div class="text-sm text-gray-600 mb-2">豪华套房 | 2人入住</div>
                                        <div class="flex items-center text-xs text-gray-500">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                            <span>预计完成时间: 15:00</span>
                                        </div>
                                    </div>
                                    <div class="bg-green-50 text-green-700 px-3 py-1 rounded-lg text-sm font-medium">
                                        已完成
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-bar">
                    <div class="tab-item text-gray-400">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                        <span>首页</span>
                    </div>
                    <div class="tab-item text-primary-600">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
                            <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path>
                        </svg>
                        <span>任务</span>
                    </div>
                    <div class="tab-item text-gray-400">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                        </svg>
                        <span>消息</span>
                    </div>
                    <div class="tab-item text-gray-400">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        <span>我的</span>
                    </div>
                </div>
            </div>

            <!-- 房间详情与质检页面 -->
            <div class="screen bg-white">
                <div class="status-bar">
                    <span>9:41</span>
                    <div class="flex space-x-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                        </svg>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
                        </svg>
                    </div>
                </div>
                <div class="nav-bar border-b border-gray-100">
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-gray-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                        <div class="text-xl font-semibold text-gray-800">房间 8201</div>
                    </div>
                    <div class="flex items-center space-x-3">
                        <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                        <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                        </svg>
                    </div>
                </div>
                <div class="content">
                    <div class="p-4">
                        <!-- 房间状态卡片 -->
                        <div class="bg-gradient-to-r from-primary-600 to-primary-700 rounded-xl p-4 mb-4 text-white">
                            <div class="flex justify-between items-center mb-3">
                                <div class="text-lg font-medium">豪华大床房</div>
                                <div class="bg-white bg-opacity-20 px-3 py-1 rounded-lg backdrop-blur-sm">
                                    <span class="text-sm font-medium">待清扫</span>
                                </div>
                            </div>
                            <div class="grid grid-cols-2 gap-3 mb-3">
                                <div class="bg-white bg-opacity-10 p-3 rounded-lg backdrop-blur-sm">
                                    <div class="text-xs text-white text-opacity-80">入住时间</div>
                                    <div class="font-medium">06-15 14:00</div>
                                </div>
                                <div class="bg-white bg-opacity-10 p-3 rounded-lg backdrop-blur-sm">
                                    <div class="text-xs text-white text-opacity-80">退房时间</div>
                                    <div class="font-medium">06-17 12:00</div>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <svg class="w-5 h-5 mr-2 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                </svg>
                                <span>VIP客户，请优先处理</span>
                            </div>
                        </div>
                        
                        <!-- 清洁检查表 -->
                        <div class="bg-white rounded-xl shadow-sm p-4 mb-4 border border-gray-100">
                            <div class="flex justify-between items-center mb-4">
                                <div class="font-medium text-lg text-gray-800">清洁检查表</div>
                                <div class="text-sm text-primary-600 font-medium">0/12 完成</div>
                            </div>
                            
                            <div class="space-y-3">
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="w-5 h-5 text-primary-600 rounded border-gray-300 focus:ring-primary-500" id="task1">
                                        <label for="task1" class="ml-2 text-gray-700">更换床单被罩</label>
                                    </div>
                                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                    </svg>
                                </div>
                                
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="w-5 h-5 text-primary-600 rounded border-gray-300 focus:ring-primary-500" id="task2">
                                        <label for="task2" class="ml-2 text-gray-700">清洁浴室</label>
                                    </div>
                                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                    </svg>
                                </div>
                                
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="w-5 h-5 text-primary-600 rounded border-gray-300 focus:ring-primary-500" id="task3">
                                        <label for="task3" class="ml-2 text-gray-700">吸尘地毯</label>
                                    </div>
                                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                    </svg>
                                </div>
                                
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center">
                                        <input type="checkbox" class="w-5 h-5 text-primary-600 rounded border-gray-300 focus:ring-primary-500" id="task4">
                                        <label for="task4" class="ml-2 text-gray-700">补充洗漱用品</label>
                                    </div>
                                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                    </svg>
                                </div>
                            </div>
                            
                            <div class="mt-4">
                                <button class="w-full bg-gray-100 text-gray-700 py-3 rounded-lg font-medium active-scale">
                                    查看完整清单 (12项)
                                </button>
                            </div>
                        </div>
                        
                        <!-- 质检评分 -->
                        <div class="bg-white rounded-xl shadow-sm p-4 mb-4 border border-gray-100">
                            <div class="font-medium text-lg text-gray-800 mb-4">质检评分</div>
                            
                            <div class="space-y-4">
                                <div>
                                    <div class="flex justify-between mb-2">
                                        <div class="text-sm font-medium text-gray-700">卫生清洁度</div>
                                        <div class="text-sm text-gray-500">4.5/5</div>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-primary-600 h-2 rounded-full" style="width: 90%"></div>
                                    </div>
                                </div>
                                
                                <div>
                                    <div class="flex justify-between mb-2">
                                        <div class="text-sm font-medium text-gray-700">物品摆放整齐度</div>
                                        <div class="text-sm text-gray-500">4.0/5</div>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-primary-600 h-2 rounded-full" style="width: 80%"></div>
                                    </div>
                                </div>
                                
                                <div>
                                    <div class="flex justify-between mb-2">
                                        <div class="text-sm font-medium text-gray-700">用品补充完整度</div>
                                        <div class="text-sm text-gray-500">5.0/5</div>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-primary-600 h-2 rounded-full" style="width: 100%"></div>
                                    </div>
                                </div>
                                
                                <div>
                                    <div class="flex justify-between mb-2">
                                        <div class="text-sm font-medium text-gray-700">清洁效率</div>
                                        <div class="text-sm text-gray-500">4.2/5</div>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-primary-600 h-2 rounded-full" style="width: 84%"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mt-4 p-3 bg-gray-50 rounded-lg">
                                <div class="text-sm font-medium text-gray-700 mb-2">质检备注</div>
                                <div class="text-sm text-gray-600">浴室角落有少量水渍未擦拭干净，请下次注意。整体表现良好，继续保持！</div>
                            </div>
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div class="flex space-x-3 mb-6">
                            <button class="flex-1 bg-white border border-gray-300 text-gray-700 py-3 rounded-xl font-medium active-scale">
                                返回列表
                            </button>
                            <button class="flex-1 bg-gradient-to-r from-primary-500 to-primary-600 text-white py-3 rounded-xl font-medium shadow-lg active-scale">
                                开始清扫
                            </button>
                        </div>
                    </div>
                </div>
                <div class="tab-bar">
                    <div class="tab-item text-gray-400">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                        <span>首页</span>
                    </div>
                    <div class="tab-item text-primary-600">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
                            <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path>
                        </svg>
                        <span>任务</span>
                    </div>
                    <div class="tab-item text-gray-400">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                        </svg>
                        <span>消息</span>
                    </div>
                    <div class="tab-item text-gray-400">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        <span>我的</span>
                    </div>
                </div>
            </div>

            <!-- 个人中心页面 -->
            <div class="screen bg-white">
                <div class="status-bar">
                    <span>9:41</span>
                    <div class="flex space-x-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                        </svg>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
                        </svg>
                    </div>
                </div>
                <div class="nav-bar">
                    <div class="text-xl font-semibold text-gray-800">个人中心</div>
                    <div>
                        <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                    </div>
                </div>
                <div class="content">
                    <div class="bg-gradient-to-r from-primary-600 to-primary-700 p-6">
                        <div class="flex items-center">
                            <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mr-4">
                                <svg class="w-10 h-10 text-primary-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <div>
                                <div class="text-white text-xl font-medium mb-1">张小明</div>
                                <div class="text-white text-opacity-80">客房清洁员</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-4">
                        <div class="bg-white rounded-xl shadow-sm p-4 -mt-8 mb-4 border border-gray-100">
                            <div class="grid grid-cols-3 gap-4">
                                <div class="text-center">
                                    <div class="text-2xl font-semibold text-primary-600">28</div>
                                    <div class="text-sm text-gray-500">本月任务</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-semibold text-primary-600">26</div>
                                    <div class="text-sm text-gray-500">已完成</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-semibold text-green-600">4.8</div>
                                    <div class="text-sm text-gray-500">平均评分</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-sm p-4 mb-4 border border-gray-100">
                            <div class="font-medium text-lg text-gray-800 mb-4">个人信息</div>
                            <div class="space-y-4">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-primary-50 rounded-full flex items-center justify-center mr-3">
                                        <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                        </svg>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">员工编号</div>
                                        <div class="font-medium">EMP10086</div>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-primary-50 rounded-full flex items-center justify-center mr-3">
                                        <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                        </svg>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">联系电话</div>
                                        <div class="font-medium">138****5678</div>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-primary-50 rounded-full flex items-center justify-center mr-3">
                                        <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                        </svg>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">入职时间</div>
                                        <div class="font-medium">2022-03-15</div>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <div class="w-10 h-10 bg-primary-50 rounded-full flex items-center justify-center mr-3">
                                        <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                                        </svg>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">工作状态</div>
                                        <div class="text-green-600 font-medium">在职</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow-sm p-4 mb-4 border border-gray-100">
                            <div class="font-medium text-lg text-gray-800 mb-4">应用设置</div>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 bg-primary-50 rounded-full flex items-center justify-center mr-3">
                                            <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
                                            </svg>
                                        </div>
                                        <span class="font-medium">消息通知</span>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" value="" class="sr-only peer toggle-checkbox" checked>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all toggle-label"></div>
                                    </label>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 bg-primary-50 rounded-full flex items-center justify-center mr-3">
                                            <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
                                            </svg>
                                        </div>
                                        <span class="font-medium">深色模式</span>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" value="" class="sr-only peer toggle-checkbox">
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all toggle-label"></div>
                                    </label>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 bg-primary-50 rounded-full flex items-center justify-center mr-3">
                                            <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"></path>
                                            </svg>
                                        </div>
                                        <span class="font-medium">自动接收任务</span>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" value="" class="sr-only peer toggle-checkbox" checked>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all toggle-label"></div>
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="space-y-3 mb-6">
                            <button class="w-full bg-white border border-gray-200 text-gray-700 py-3 rounded-xl font-medium flex items-center justify-center">
                                <svg class="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <span>帮助与反馈</span>
                            </button>
                            
                            <button class="w-full bg-white border border-gray-200 text-gray-700 py-3 rounded-xl font-medium flex items-center justify-center">
                                <svg class="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                                <span>系统设置</span>
                            </button>
                            
                            <button class="w-full bg-white border border-red-200 text-red-600 py-3 rounded-xl font-medium flex items-center justify-center">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                                </svg>
                                <span>退出登录</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="tab-bar">
                    <div class="tab-item text-gray-400">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                        <span>首页</span>
                    </div>
                    <div class="tab-item text-gray-400">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
                        </svg>
                        <span>任务</span>
                    </div>
                    <div class="tab-item text-gray-400">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                        </svg>
                        <span>消息</span>
                    </div>
                    <div class="tab-item text-primary-600">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                        </svg>
                        <span>我的</span>
                    </div>
                </div>
            </div>
            
            <!-- 消息中心页面 -->
            <div class="screen bg-white">
                <div class="status-bar">
                    <span>9:41</span>
                    <div class="flex space-x-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                        </svg>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
                        </svg>
                    </div>
                </div>
                <div class="nav-bar border-b border-gray-100">
                    <div class="text-xl font-semibold text-gray-800">消息中心</div>
                    <div class="flex items-center space-x-3">
                        <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                        </svg>
                    </div>
                </div>
                <div class="content">
                    <div class="p-4">
                        <div class="flex overflow-x-auto scrollbar-hide space-x-2 mb-4">
                            <div class="bg-primary-600 text-white px-4 py-2 rounded-full text-sm font-medium flex-shrink-0">全部</div>
                            <div class="bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm font-medium flex-shrink-0">系统通知</div>
                            <div class="bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm font-medium flex-shrink-0">任务提醒</div>
                            <div class="bg-gray-100 text-gray-700 px-4 py-2 rounded-full text-sm font-medium flex-shrink-0">工作安排</div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="text-sm font-medium text-gray-500 mb-2">今天</div>
                            
                            <!-- 未读消息 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-3 border-l-4 border-primary-500">
                                <div class="flex">
                                    <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                        <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                                        </svg>
                                    </div>
                                    <div>
                                        <div class="font-medium mb-1">紧急任务通知</div>
                                        <div class="text-sm text-gray-600 mb-2">8201房间需要立即清扫，VIP客户将于11:00入住。</div>
                                        <div class="text-xs text-gray-500">10:15</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-3">
                                <div class="flex">
                                    <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                        <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                    </div>
                                    <div>
                                        <div class="font-medium mb-1">任务完成确认</div>
                                        <div class="text-sm text-gray-600 mb-2">您已完成9018房间的清扫任务，质检评分：5.0</div>
                                        <div class="text-xs text-gray-500">09:30</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="text-sm font-medium text-gray-500 mb-2">昨天</div>
                            
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-3">
                                <div class="flex">
                                    <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                        <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                        </svg>
                                    </div>
                                    <div>
                                        <div class="font-medium mb-1">工作安排变更</div>
                                        <div class="text-sm text-gray-600 mb-2">下周一(6月19日)将进行季度大扫除，请做好准备。</div>
                                        <div class="text-xs text-gray-500">昨天 16:30</div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 已读消息 -->
                            <div class="bg-white rounded-xl shadow-sm p-4 mb-3">
                                <div class="flex">
                                    <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                    </div>
                                    <div>
                                        <div class="font-medium mb-1">系统更新通知</div>
                                        <div class="text-sm text-gray-600 mb-2">系统已更新至v1.0.0版本，新增了房间检查清单功能，请查看使用指南。</div>
                                        <div class="text-xs text-gray-500">昨天 10:20</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-bar">
                    <div class="tab-item text-gray-400">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                        <span>首页</span>
                    </div>
                    <div class="tab-item text-gray-400">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
                        </svg>
                        <span>任务</span>
                    </div>
                    <div class="tab-item text-primary-600">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"></path>
                            <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"></path>
                        </svg>
                        <span>消息</span>
                    </div>
                    <div class="tab-item text-gray-400">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        <span>我的</span>
                    </div>
                </div>
            </div>
                        <!-- 任务详情页面 -->
                        <div class="screen bg-white">
                            <div class="status-bar">
                                <span>9:41</span>
                                <div class="flex space-x-2">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                                    </svg>
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                    </svg>
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="nav-bar border-b border-gray-100">
                                <div class="flex items-center">
                                    <svg class="w-6 h-6 text-gray-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                                    </svg>
                                    <div class="text-xl font-semibold text-gray-800">任务详情</div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
                                    </svg>
                                    <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="content">
                                <div class="p-4">
                                    <!-- 任务状态卡片 -->
                                    <div class="bg-gradient-to-r from-primary-600 to-primary-700 rounded-xl p-4 mb-4 text-white">
                                        <div class="flex justify-between items-center mb-3">
                                            <div class="text-lg font-medium">房间 8201</div>
                                            <div class="bg-white bg-opacity-20 px-3 py-1 rounded-lg backdrop-blur-sm">
                                                <span class="text-sm font-medium">待清扫</span>
                                            </div>
                                        </div>
                                        <div class="grid grid-cols-2 gap-3 mb-3">
                                            <div class="bg-white bg-opacity-10 p-3 rounded-lg backdrop-blur-sm">
                                                <div class="text-xs text-white text-opacity-80">开始时间</div>
                                                <div class="font-medium">10:30</div>
                                            </div>
                                            <div class="bg-white bg-opacity-10 p-3 rounded-lg backdrop-blur-sm">
                                                <div class="text-xs text-white text-opacity-80">预计完成</div>
                                                <div class="font-medium">11:15</div>
                                            </div>
                                        </div>
                                        <div class="flex items-center">
                                            <svg class="w-5 h-5 mr-2 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                                            </svg>
                                            <span>优先级：高 | VIP客户</span>
                                        </div>
                                    </div>
                                    
                                    <!-- 房间信息 -->
                                    <div class="bg-white rounded-xl shadow-sm p-4 mb-4 border border-gray-100">
                                        <div class="font-medium text-lg text-gray-800 mb-4">房间信息</div>
                                        <div class="space-y-3">
                                            <div class="flex justify-between">
                                                <div class="text-gray-600">房间类型</div>
                                                <div class="font-medium">豪华大床房</div>
                                            </div>
                                            <div class="flex justify-between">
                                                <div class="text-gray-600">楼层</div>
                                                <div class="font-medium">8楼</div>
                                            </div>
                                            <div class="flex justify-between">
                                                <div class="text-gray-600">入住时间</div>
                                                <div class="font-medium">今日 14:00</div>
                                            </div>
                                            <div class="flex justify-between">
                                                <div class="text-gray-600">退房时间</div>
                                                <div class="font-medium">06-17 12:00</div>
                                            </div>
                                            <div class="flex justify-between">
                                                <div class="text-gray-600">特殊要求</div>
                                                <div class="font-medium text-red-600">需加床，备婴儿床</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 清洁任务 -->
                                    <div class="bg-white rounded-xl shadow-sm p-4 mb-4 border border-gray-100">
                                        <div class="font-medium text-lg text-gray-800 mb-4">清洁任务</div>
                                        <div class="space-y-3">
                                            <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                                                <input type="checkbox" class="w-5 h-5 text-primary-600 rounded border-gray-300 focus:ring-primary-500" id="task1">
                                                <label for="task1" class="ml-2 text-gray-700 flex-1">更换床单被罩</label>
                                                <span class="text-xs text-gray-500">必做</span>
                                            </div>
                                            
                                            <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                                                <input type="checkbox" class="w-5 h-5 text-primary-600 rounded border-gray-300 focus:ring-primary-500" id="task2">
                                                <label for="task2" class="ml-2 text-gray-700 flex-1">清洁浴室</label>
                                                <span class="text-xs text-gray-500">必做</span>
                                            </div>
                                            
                                            <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                                                <input type="checkbox" class="w-5 h-5 text-primary-600 rounded border-gray-300 focus:ring-primary-500" id="task3">
                                                <label for="task3" class="ml-2 text-gray-700 flex-1">补充洗漱用品</label>
                                                <span class="text-xs text-gray-500">必做</span>
                                            </div>
                                            
                                            <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                                                <input type="checkbox" class="w-5 h-5 text-primary-600 rounded border-gray-300 focus:ring-primary-500" id="task4">
                                                <label for="task4" class="ml-2 text-gray-700 flex-1">吸尘和拖地</label>
                                                <span class="text-xs text-gray-500">必做</span>
                                            </div>
                                            
                                            <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                                                <input type="checkbox" class="w-5 h-5 text-primary-600 rounded border-gray-300 focus:ring-primary-500" id="task5">
                                                <label for="task5" class="ml-2 text-gray-700 flex-1">准备婴儿床</label>
                                                <span class="text-xs text-primary-600">特殊要求</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 备注和问题报告 -->
                                    <div class="bg-white rounded-xl shadow-sm p-4 mb-4 border border-gray-100">
                                        <div class="font-medium text-lg text-gray-800 mb-4">备注和问题报告</div>
                                        <textarea class="w-full h-24 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none" placeholder="添加备注或报告问题..."></textarea>
                                        <div class="flex space-x-2 mt-3">
                                            <button class="flex items-center justify-center bg-gray-100 text-gray-700 p-3 rounded-lg">
                                                <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                                </svg>
                                                <span>添加照片</span>
                                            </button>
                                            <button class="flex items-center justify-center bg-gray-100 text-gray-700 p-3 rounded-lg">
                                                <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                                                </svg>
                                                <span>报告问题</span>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <!-- 操作按钮 -->
                                    <div class="flex space-x-3 mb-6">
                                        <button class="flex-1 bg-white border border-gray-300 text-gray-700 py-3 rounded-xl font-medium">
                                            暂停任务
                                        </button>
                                        <button class="flex-1 bg-gradient-to-r from-primary-500 to-primary-600 text-white py-3 rounded-xl font-medium shadow-lg">
                                            开始清扫
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 登录页面 -->
                        <div class="screen bg-white">
                            <div class="status-bar">
                                <span>9:41</span>
                                <div class="flex space-x-2">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                                    </svg>
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                    </svg>
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="h-full flex flex-col justify-center px-6">
                                <div class="mb-10 text-center">
                                    <div class="w-20 h-20 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <svg class="w-12 h-12 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                        </svg>
                                    </div>
                                    <h1 class="text-2xl font-bold text-gray-800">酒店客房清扫系统</h1>
                                    <p class="text-gray-600 mt-2">员工登录</p>
                                </div>
                                
                                <div class="space-y-4 mb-8">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">员工编号</label>
                                        <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="请输入员工编号">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                                        <input type="password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="请输入密码">
                                    </div>
                                </div>
                                
                                <button class="w-full bg-gradient-to-r from-primary-500 to-primary-600 text-white py-3 rounded-lg font-medium shadow-lg mb-4">
                                    登录
                                </button>
                                
                                <div class="flex justify-between text-sm">
                                    <a href="#" class="text-primary-600">忘记密码?</a>
                                    <a href="#" class="text-primary-600">联系管理员</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </body>
            </html>